<template>
  <div class="mod-config">
    <basic-container>
        <navigationRenWuShu :sign="{a:false,b:false,c:false,d:true,e:false,f:false}"></navigationRenWuShu>
      <div v-if="zhiShow=='1'" class="boxsty zhiBiao">
        <!-- <div class="flex justifyContentSpaceBetween">
            <div class="tabletext">任务书查看</div>
        </div> -->
        <div  :height="searchheight" >
          <span style="float:right;margin-top: -30px;cursor: pointer;" @click="searchchangeadvanced">{{ searchadvanced ? "查询条件收起" : "查询条件展开" }}
          <i :class="searchadvanced ? 'el-icon-arrow-up' : 'el-icon-arrow-down'" /> </span>
           <div  v-show="searchadvanced" >
                <div class="flex">
                    <div>
                        <el-form :model="form"  :inline="true" class="form-inline">
                        <el-form-item label="发约人姓名">
                          <el-input v-model="form.fayueName" placeholder="发约人姓名" style="width: 160px;" :clearable="true"></el-input>
                        </el-form-item>
                        <el-form-item  label="发约人职务">
                          <el-input v-model="form.fayueZhiwu" placeholder="发约人职务" style="width: 160px;" :clearable="true"></el-input>
                        </el-form-item>
                        <el-form-item label="受约人姓名">
                          <el-input v-model="form.shouyueName" placeholder="受约人姓名" style="width: 160px;" :clearable="true"></el-input>
                        </el-form-item>
                        <el-form-item  label="受约人职务">
                          <el-input v-model="form.shouyueZhiwu" placeholder="受约人职务" style="width: 160px;" :clearable="true"></el-input>
                        </el-form-item>

                        <el-form-item  label="签订级别">
                          <el-select :clearable="true" v-model="form.signLevel" placeholder="请选择签订级别"  style="width:100%;"
                                     class="xiaLa">
                            <el-option v-for="item in leveList" :key="item.value" :label="item.label" :value="item.value">
                            </el-option>
                          </el-select>
                        </el-form-item>

                        <el-form-item>
                            <el-button icon="el-icon-search" type="primary" class="marginLeft"  @click="getDataList()">检索</el-button>
                        </el-form-item>
                        </el-form>
                    </div>
                </div>
           </div>
        </div>

            <div class="border-top-theme">
                <div class="mt10">
                    任务书
                    <span>
                        <el-radio v-model="radio" label="1">个人</el-radio>
                        <el-radio v-model="radio" label="2">机构</el-radio>
                    </span>
<!--                    <div style="float:right">-->
<!--                        <el-button type="primary">导出</el-button>-->
<!--                        <el-button type="primary">打印</el-button>-->
<!--                    </div>-->
                </div>
            </div>
            <el-table
              ref="table"
              style="width: 100%;margin-top:20px"
              :data="dataList"
              border
              v-if="zhiShow==1"
              v-loading="dataListLoading">
                <el-table-column type="selection" width="55" header-align="center" align="center"></el-table-column>
                <el-table-column type="index" width="80" header-align="center" align="center" label="序号"></el-table-column>
                <el-table-column prop="workAssignName" label="任务书名称" min-width="120" header-align="center" align="center"></el-table-column>
                <el-table-column
                  prop="shouyueName"
                  header-align="center"
                  align="center"
                  min-width="120"
                  label="受约人姓名">
                  <template slot-scope="scope">
                    <div v-for="(item,index) in cutout(scope.row.shouyueName).slice(0, 2)">
                      <el-tooltip class="item" :disabled="cutout(scope.row.shouyueName).length<3" effect="dark" :content="scope.row.shouyueName" placement="top-start">
                        <span>{{item}}<span v-if="cutout(scope.row.shouyueName).length>2&&index==1">...</span></span>
                      </el-tooltip>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="shouyueZhiwu"
                  header-align="center"
                  align="center"
                  min-width="180"
                  label="受约人职务">

                  <template slot-scope="scope">
                    <div v-for="item in cutout(scope.row.shouyueZhiwu).slice(0, 2)">
                      <el-tooltip class="item" effect="dark" :content="scope.row.shouyueZhiwu" placement="top-start">
                        <span>{{validatenull(item)?'-':item | ellipsis}}</span>
                      </el-tooltip>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="fayueName"
                  header-align="center"
                  align="center"
                  min-width="120"
                  label="发约人姓名">
                  <template slot-scope="scope">
                    <div v-for="(item,index) in cutout(scope.row.fayueName).slice(0, 2)">
                      <el-tooltip :disabled="cutout(scope.row.fayueName).length<3" class="item" effect="dark" :content="scope.row.fayueName" placement="top-start">
                      <span>{{item}}<span v-if="cutout(scope.row.fayueName).length>2&&index==1">...</span></span>
                      </el-tooltip>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="fayueZhiwu"
                  header-align="center"
                  align="center"
                  min-width="180"

                  label="发约人职务">
                  <template slot-scope="scope">
                    <div v-for="item in cutout(scope.row.fayueZhiwu).slice(0, 2)">
                      <el-tooltip class="item" :disabled="item.length<10" effect="dark" :content="scope.row.fayueZhiwu" placement="top-start">
                          <span>{{(validatenull(item)?'-':item) | ellipsis}}</span>
                      </el-tooltip>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="sumZbDf" label="得分" min-width="120" header-align="center" align="center"></el-table-column>
                <el-table-column label="操作" width="200" header-align="center" align="center" fixed="right">
                    <template slot-scope="scope">
                        <el-button type="primary" plain @click="checkDetails(scope.row)">查看#</el-button>
                        <el-button type="primary" plain @click="tracking()">跟踪#</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="avue-crud__pagination">
            <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex"
                            :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="totalPage" background
                            layout="total, sizes, prev, pager, next, jumper">
            </el-pagination>
            </div>
      </div>
      <rwszbForm v-if="zhiShow==2" ref="zhibiaoFormRef" :rwszbForm='rwszbForm' v-on:zhibiaoChild='zhibiaoChild'></rwszbForm>
      <genzongForm :genzongForm='genzongForm'></genzongForm>
    </basic-container>
  </div>
</template>

<script>
import {fetchList, delObj,updateFilling,faqiData,confirmhz} from '@/api/hetongrenwu/gongzuorenwushu/workAssignck'
import rwszbForm from '@/views/hetongrenwu/components/renwushuzb-form.vue'
import genzongForm from '@/views/hetongrenwu/components/genzong-form.vue'
import { validatenull } from "@/util/validate";
export default {
    components:{
        rwszbForm,
        genzongForm
    },
    data(){
        return{
            form:{},
            radio:'1',
            radioTwo:1,
            tableData:[
                {ffzt:1,tui:"未审核"}
            ],
            pageIndex:1,
            pageSize: 10,
            totalPage: 0,
            zhiShow:1,
            rwszbForm:{},
            gridData:[
                {
                zhiwu: '经理',
                name: '王小虎',
                status: '退回'
                }
            ],
            leveList:[
                {label:'所属单位部门负责人',value:'1'},
                {label:'本部一般管理人员',value:'2'},
                {label:'所属单位一般管理人员',value:'3'}
            ],
            genzongForm:{},
            searchadvanced: true,
            searchheight: '0',
            dataList:[],
            dataListLoading:false
        }
    },
    filters:{
        ellipsis(value){
          if (!value) return '';
          if (value.length > 8) {
            return value.slice(0,8) + '...'
          }
          return value
        }
      },
    watch:{
      radio(value){
        if(value){
          this.getDataList();
        }
      }
    },
    created() {
      this.getDataList()
    },
    methods:{
        searchchangeadvanced() {
            this.searchadvanced = !this.searchadvanced;
            if(this.searchadvanced){
                this.searchheight= 'auto'
            }
        },
        //合同跟踪
        tracking(){
            this.genzongForm={
                dialogVisible:true
            }
        },
        //编辑查看
        checkDetails(row){
            this.zhiShow=2;
            this.rwszbForm={
                enter:4,
                disabled:true,
                hetongId:row.id
            }
          var params=Object.assign(row,this.rwszbForm)
            this.$nextTick(() => {
              this.$refs.zhibiaoFormRef.init(params)
            })
        },

        //子集信息
        zhibiaoChild(zhibiaoChild){
            if(zhibiaoChild){
                this.zhiShow=1

            }
        },
        // 每页数
        sizeChangeHandle(val) {
            this.pageSize = val
            this.pageIndex = 1
            this.getDataList()
        },
        // 当前页
        currentChangeHandle(val) {
            this.pageIndex = val
            this.getDataList()
        },
      // 获取数据列表
      getDataList() {
        this.dataListLoading = true
        fetchList(Object.assign({
          type:this.radio,
          fayueName:this.form.fayueName,
          fayueZhiwu:this.form.fayueZhiwu,
          shouyueZhiwu:this.form.shouyueZhiwu,
          signLevel:this.form.signLevel,
          shouyueName:this.form.shouyueName,
          current: this.pageIndex,
          size: this.pageSize,
          workAssignAuditStatus:7,
          contFillStatus:1
        })).then(response => {
          this.dataList = response.data.data.records;
          this.totalPage = response.data.data.total
        })
        this.dataListLoading = false
      },
    cutout(cellValue) {
      if (cellValue) {
        var c = cellValue.split(",");
        if(c.size<1){
          c.push('-');
          c.push('-');
        } else if(c.size<2){
          c.push('-');
        }
        return c;
      }
    },
      //判空
      validatenull(val){
        return validatenull(val)
      },
    }
}
</script>

<style>

</style>
